<template>
    <div class="onlineMovie">
      <div class="content" ref="content">
        <div class="content-container">
          <div class="line-block-item" v-for="item in onlineMovieList" @click="$router.push({path:'/onlineMovieDetails',query:{id:item.id}})">
            <div class="left">
              <img :src="item.posterPicUrl" alt="" style="width: 70px;height: 100%">
            </div>
            <div class="center">
              <p class="name">{{item.name}}</p>
              <p class="introduction">“{{item.nameDesc}}”</p>
              <p class="protagonist">主演：{{item.cast}}</p>
            </div>
            <div class="right">
              <p class="score">{{item.score}}</p>
              <div class="btn-wrapper">
                <button class="btn-buyTicket" @click.stop="$router.push({path:'/chooseCinema',query:{id:item.id,name:item.name}})">{{item.sellTypeDesc}}</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import {getStorage} from "../../../../common/js/localStorage";
    export default {
        name: "onlineMovie",
        data(){
          return{
            onlineMovieList:[]
          }
        },
        mounted() {
          this.onlineMovieList = getStorage('hotShow').filmList
          console.log(this.onlineMovieList)
          this.$nextTick(()=>{
            if(!this.scroll){
              // return
              let scroll = new BScroll(this.$refs['content'],{click:true})
            }else {
              this.scroll.refresh();
            }
          })
    },
    }
</script>

<style scoped lang="stylus">
.onlineMovie
  height 100%
  .content
    height 100%
    overflow hidden
    .line-block-item
      display flex
      background #171718
      padding 9px 10px
      height 102px
      margin-bottom 10px
      .left
        flex 0 0 74px
        text-align right
        background url('bg_poster.png')no-repeat right center/70px 102px
      .center
        flex 1
        padding 0 15px
        text-align left
        overflow hidden
        .name,.introduction,.protagonist
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
        .name
          margin-top 14px
          height 22px
          line-height 22px
          color #ffffff
          font-size 16px
          font-weight 500
        .introduction
          color #ffffff
          font-size 12px
          height 17px
          line-height 17px
          padding-top 8px
        .protagonist
          line-height 16px
          font-size 11px
          color #8B929E
          padding-top 8px
      .right
        flex 0 0 60px
        text-align right
        .score
          padding-top 20px
          color #F7C20F
          font-size 16px
        .btn-wrapper
          padding-top 19px
          .btn-buyTicket
            height 28px
            width 53px
            font-size 14px
            color #161719
            background #EEAC21
            border none
            border-radius 14px
            outline none
</style>
